<template>
  <!-- 折线图4  -->
  <div ref="index" class="index"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, watch, nextTick } from "vue";
// 接收值
let props = defineProps({
  carData: {
    type: Object,
    default: false,
  },
});
// 定义值
let index = ref(); //ref的应用
// 定义加载函数
let initCharts = () => {
  let chart = echarts.init(index.value);
  var N_POINT = 90; // 角度
  var YMAX = 10; // Y轴放大倍数

  //正弦
  var genSinItem = function (k) {
    return Math.sin((Math.PI / N_POINT) * 100 * k) * YMAX;
  };
  //方波
  var genSquItem = function (k) {
    if (k % 2 === 0) {
      return 1;
    } else {
      return 0;
    }
  };
  let option = {
    backgroundColor: "#02234c",
    tooltip: {
      trigger: "axis",
      backgroundColor: "#07172c",
      textStyle: {
        color: "rgba(126,199,255,1)",
      },
      axisPointer: {
        type: "cross",
      },
    },
    xAxis: [
      {
        gridIndex: 0,
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "rgba(151,184,216,0.5)",
            type: "dashed",
          },
        },
        type: "category",
        boundaryGap: false,
        data: [-36, -24, -12, 0, 12, 24, 36, 48, 60, 72],
      },
      {
        gridIndex: 1,
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "rgba(151,184,216,0.5)",
            type: "dashed",
          },
        },
        type: "category",
        boundaryGap: false,
        data: [-36, -24, -12, 0, 12, 24, 36, 48, 60, 72],
      },
      {
        gridIndex: 2,
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "rgba(151,184,216,0.5)",
            type: "dashed",
          },
        },
        type: "category",
        boundaryGap: false,
        data: [-36, -24, -12, 0, 12, 24, 36, 48, 60, 72],
      },
      {
        gridIndex: 3,
        axisLine: {
          lineStyle: {
            color: "#97b8d8",
          },
        },
        axisLabel: {
          color: "#97b8d8",
          fontSize: 14,
        },
        type: "category",
        boundaryGap: false,
        data: [-36, -24, -12, 0, 12, 24, 36, 48, 60, 72],
      },
    ],
    yAxis: [
      {
        gridIndex: 0,
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        splitNumber: 1,
        name: "正弦",
        nameLocation: "center",
        nameTextStyle: {
          color: "#97b8d8",
          fontSize: 14,
        },
        nameRotate: 360,
      },
      {
        gridIndex: 1,
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        splitNumber: 1,
        name: "方波",
        nameLocation: "center",
        nameTextStyle: {
          color: "#97b8d8",
          fontSize: 14,
        },
        nameRotate: 360,
      },
      {
        gridIndex: 2,
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        splitNumber: 1,
        name: "其他",
        nameLocation: "center",
        nameTextStyle: {
          color: "#97b8d8",
          fontSize: 14,
        },
        nameRotate: 360,
      },
      {
        gridIndex: 3,
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        splitNumber: 1,
        name: "",
        nameLocation: "center",
        nameTextStyle: {
          color: "#97b8d8",
          fontSize: 14,
        },
        nameRotate: 360,
      },
    ],
    grid: [
      {
        top: "10%",
        left: "12%",
        right: "4%",
        bottom: "4%",
        height: "20%",
      },
      {
        top: "30%",
        left: "12%",
        right: "4%",
        bottom: "4%",
        height: "20%",
      },
      {
        top: "50%",
        left: "12%",
        right: "4%",
        bottom: "4%",
        height: "20%",
      },
      {
        top: "70%",
        left: "12%",
        right: "4%",
        bottom: "4%",
        height: "20%",
      },
    ],
    series: [
      //正弦
      {
        type: "line",
        data: Array.apply(null, Array(N_POINT)).map((item, i) => [
          i,
          genSinItem(i),
        ]),
        xAxisIndex: 0,
        yAxisIndex: 0,
        smooth: true,
        lineStyle: {
          color: "rgba(0,171,252,1)",
        },
        itemStyle: {
          normal: {
            color: "#92c690",
            borderColor: "#92c690",
          },
        },
      },
      //方波
      {
        type: "line",
        data: Array.apply(null, Array(N_POINT)).map((item, i) => genSquItem(i)),
        xAxisIndex: 1,
        yAxisIndex: 1,
        step: "start",
        smooth: false,
        lineStyle: {
          color: "#B89919",
        },
        itemStyle: {
          normal: {
            color: "#219cab",
            borderColor: "#219cab",
          },
        },
      },
      {
        type: "line",
        data: [
          0, 74.1, 67.2, 79.5, 46.4, 46.4, 46.4, 74.1, 67.2, 79.5, 46.4, 0,
        ],
        xAxisIndex: 2,
        yAxisIndex: 2,
        smooth: true,
        lineStyle: {
          color: "rgba(38,210,165,1)",
        },
        itemStyle: {
          normal: {
            color: "#6f68bf",
            borderColor: "#6f68bf",
          },
        },
      },
    ],
  };

  chart.setOption(option, true);
  // 当窗口大小改变时候，echarts重置大小
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

// 监听当配置项发生变化的时候，调用加载函数
watch(
  () => props.carData,
  (val) => {
    if (Object.keys(val)) {
      nextTick(() => {
        initCharts();
      });
    }
  },
  { immediate: true }
);
</script>

<style scoped lang="less">
.index {
  width: 100%;
  height: 200px;
}
</style>
